<template>
    <div class="products-detail">
        <div class="container">
            <div class="row mt-5">
                <div class="col-12 col-md-9 left">
                    <div class="card mb-4 d-flex flex-column flex-md-row gap-2 border-0"
                        style="transition: transform 0.3s ease, opacity 0.3s ease;">
                        <div class="productImg">
                            <div class="fdj" @mouseover="handleMouseOver" @mousemove="handleMouseMove"
                                @mouseout="handleMouseOut">
                                <div class="bg" ref="bg">
                                    <img class="img-fluid" src="../../assets/images/sp1.jpg" alt="">
                                    <div class="zft" ref="zft"></div>
                                </div>
                                <div class="bg2" ref="bg2">
                                    <img src="../../assets/images/sp1.jpg" alt="" ref="img">
                                </div>
                            </div>
                        </div>
                        <div class="card-body card-body-mm productInfo">
                            <div class="d-flex flex-column align-items-left gap-2">
                                <h3 class="name">维斯康 VITSCAN宠物保健品海藻颗粒</h3>
                                <div class="fg"></div>
                                <ul class="row g-1 p-0">
                                    <li>品牌：hipidog/嬉皮狗</li>
                                    <li>物理形态：其他</li>
                                    <li>使用对象：通用</li>
                                </ul>
                                <span class="price">¥29.00</span>
                                <div class="buy d-flex align-items-center gap-3 mt-3">
                                    <span class="buybtn" @click="addToShop">立即购买</span>
                                    <div class="quantity-controller">
                                        <!-- 使用 ElInputNumber 组件 -->
                                        <el-input-number v-model="quantity" :min="1" :max="100"
                                            @change="handleQuantityChange" size="small"></el-input-number>
                                    </div>
                                </div>
                                <div class="text-muted d-flex flex-column mt-3">
                                    <span class="numbering">商品编号：00010011 </span>
                                    <span class="sort">分类：猫猫主粮 </span>
                                </div>
                                <transition name="slide-up" appear>
                                    <div v-if="showCard" class="col-12 col-md-6 card addproduct">
                                    <div class="card-body d-flex flex-column gap-2 position-relative">
                                        <button type="button" class="close-btn" @click="hideCard">
                                            <span class="close-icon">x</span>
                                        </button>
                                        <div class="d-flex flex-column gap-2">
                                            <div class="d-flex align-items-center gap-4">
                                                <span class="message">添加成功</span>
                                                <div class="goshopping" @click="goshop">去购物车结算</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                </transition>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-md-3 d-flex justify-content-center">
                    <div class="referral d-none d-lg-block" style="width: 100%;">
                        <div class="title d-flex gap-3"><img src="../../assets/images/productreferral.webp"
                                alt=""><span>相关推荐</span></div>
                        <ul class="mt-1 referrallist mt-3">
                            <li v-for="(item, index) in productList.slice(0, 5)" class="col-12 mt-3">
                                <div
                                    class="card h-100 d-flex flex-row justify-content-between align-items-center border-0">
                                    <img class="card-img-top img-fluid" :src="item.imgUrl" alt="hhh">
                                    <div
                                        class="card-body d-flex flex-column justify-content-center align-items-left pt-0 pb-0">
                                        <p class="card-text">{{ item.title }}</p>
                                        <span>￥{{ item.price }}</span>
                                        <h5>立即购买</h5>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            isZoomed: false, // 是否正在放大
            quantity: 1, // 初始商品数量
            showCard:false,  // 是否显示添加成功卡片
            productList: [{
                id: 1,
                title: '维斯康 VITSCAN宠物保健品海藻颗粒',
                imgUrl: require("../../assets/images/sp1.jpg"),
                price: '98.00'
            }, {
                id: 2,
                title: '小佩饮水机 宠物自动喂食器智能饮水器',
                imgUrl: require("../../assets/images/sp2.jpg"),
                price: '123.00'
            }, {
                id: 3,
                title: '宠物窝猫狗睡袋宠物猫咪垫子四季通用',
                imgUrl: require("../../assets/images/sp3.jpg"),
                price: '28.00'
            }, {
                id: 4,
                title: '乐妃猫爬架 磨爪猫咪玩具宠物休闲娱乐',
                imgUrl: require("../../assets/images/sp4.jpg"),
                price: '45.00'
            }, {
                id: 5,
                title: '怡亲猫砂 除臭膨润土猫沙 宠物猫砂',
                imgUrl: require("../../assets/images/sp5.jpg"),
                price: '99.00'
            }, {
                id: 6,
                title: '猫狗天然植物除耳螨滴耳液耳漂洗耳水',
                imgUrl: require("../../assets/images/sp6.jpg"),
                price: '67.00'
            }],
        }
    },
    methods: {
        /**
        * @Title 放大镜效果实现
        * @Author wcw
        * @Date 2025/01/02 13:48:44
        */
        handleMouseOver(e) {
            this.isZoomed = true;
            if (this.$refs.zft && this.$refs.bg2) {
                this.$refs.zft.style.display = 'block';
                this.$refs.bg2.style.display = 'block';
            }
        },
        handleMouseMove(e) {
            if (!this.isZoomed) return;

            const bgRect = this.$refs.bg.getBoundingClientRect();
            const zftRect = this.$refs.zft.getBoundingClientRect();

            let left = e.clientX - bgRect.left - zftRect.width / 2;
            let top = e.clientY - bgRect.top - zftRect.height / 2;

            // 设置边界限制
            left = Math.max(0, Math.min(left, bgRect.width - zftRect.width));
            top = Math.max(0, Math.min(top, bgRect.height - zftRect.height));

            this.$refs.zft.style.left = `${left}px`;
            this.$refs.zft.style.top = `${top}px`;

            // 设置大图位置
            this.$refs.img.style.left = `-${left * 1.5}px`;
            this.$refs.img.style.top = `-${top * 1.5}px`;
        },
        handleMouseOut() {
            this.isZoomed = false;
            this.$refs.zft.style.display = 'none';
            this.$refs.bg2.style.display = 'none';
        },

        /**
        * @Title 加减器
        * @Author wcw
        * @Date 2025/01/02 13:49:05
        */
        handleQuantityChange(value) {
            console.log('商品数量已更改为:', value);
        },

        /**
        * @Title 添加到购物车
        * @Author wcw
        * @Date 2025/01/02 15:17:07
        */
        addToShop(){
            this.showCard = true;
        },

        hideCard(){
            this.showCard = false;
        },

        // 跳转到购物车
        goshop(){
            this.$router.push({
                name: 'shoppingCart',
            });
        }
    }
}
</script>

<style scoped>
.left {
    border-right: 1px solid rgba(153, 153, 153, .2);
}
.left > .card{
    padding-bottom: 3rem;
    border-bottom: 1px solid #ddd !important;
}
.productImg {
    width: 368px;
    height: 460px;
}

.productImg img {
    position: absolute;
    display: block;
    width: 368px;
    height: 460px;
}

.fdj .bg {
    width: 368px;
    height: 460px;
    position: absolute;
}

.zft {
    width: 200px;
    height: 200px;
    background: rgba(255, 255, 255, .5);
    position: absolute;
    display: none;
}

.fdj .bg2 {
    width: 420px;
    height: 430px;
    border: 1px solid rgba(0, 0, 0, .3);
    position: absolute;
    left: 370px;
    overflow: hidden;
    display: none;
    z-index: 5;
}

.fdj>.bg2>img {
    display: block;
    width: 160%;
    height: 200%;
    position: absolute;
    top: 0;
    left: 0;
    transition: all .3s ease;
}

.productInfo .name {
    font-size: 21px;
    font-weight: normal;
    color: #0c0c0c;
    font-family: 微软雅黑;
}

.productInfo .fg {
    width: 50px;
    height: 3px;
    margin-top: 10px;
    margin-bottom: 10px;
    background-color: rgba(221, 221, 221, 1)
}

.productInfo ul {
    font-size: 13px;
    font-weight: normal;
    color: #999999;
    font-family: 微软雅黑;
}

.productInfo .price {
    font-size: 26px;
    font-weight: normal;
    color: #ff9003;
    font-family: 微软雅黑;
    line-height: 26px;
}

.buy .buybtn {
    width: 137px;
    height: 45.5px;
    color: #ffffff;
    border-color: #000000;
    background-image: none;
    background-color: #000000;
    text-align: center;
    line-height: 45.5px;
    cursor: pointer;
}

.quantity-controller {
    z-index: 1;
}

/* :deep(.quantity-controller .el-input__inner,
.quantity-controller .el-input-number__decrease,
.quantity-controller .el-input-number__increase) {
    height: 46px;
    line-height: 46px;
    border-radius: 0px;
    background: transparent;
} */
:deep(.quantity-controller .el-input__inner){
    height: 46px;
    line-height: 46px;
    border-radius: 0px;
    background: transparent;
}
:deep(.quantity-controller .el-input-number__decrease){
    height: 46px;
    line-height: 46px;
    border-radius: 0px;
    background: transparent;
}
:deep(.quantity-controller .el-input-number__increase){
    height: 46px;
    line-height: 46px;
    border-radius: 0px;
    background: transparent;
}


:deep(.quantity-controller .el-input-number__decrease) {
    width: 40px;
}
:deep(.quantity-controller .el-input-number__increase){
    width: 40px;
}
/* :deep(.quantity-controller .el-input__inner:focus) {
  border-color: rgba(255,144,3,1); 
} */


.text-muted {
    font-family: 微软雅黑;
    font-weight: normal;
}

.text-muted span {
    display: block;
    border-top: 1px dotted #ddd;
    color: #999999;
    font-size: 13px;
    padding: 9px 0;
}


.referral .title {
    position: relative;
    line-height: 1.5em;
    background-color: #000000;
    background-position: left top;
    background-repeat: no-repeat;
    margin-top: 0;
    margin-bottom: 8px;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-right: 20px;
    padding-left: 20px;
    border-radius: 50px;
    color: white;
    font-size: 15px;
    font-weight: 800;
}

.referral .title img {
    width: 16px;
}

.referrallist img {
    width: 80px;
    height: 95px;
}

.referrallist p {
    font-size: 12px;
    font-weight: normal;
    color: #999999;
    font-family: 微软雅黑;
    margin: 0;
}

.referrallist p:hover {
    color: black;
}

.referrallist span {
    font-size: 18px;
    font-weight: normal;
    color: #ff9003;
    font-family: century gothic;
}

.referrallist h5 {
    background-image: none;
    font-size: 12px;
    font-weight: bold;
    color: #333333;
    font-family: 微软雅黑;
    border-color: transparent;
    background-color: transparent;
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 1px;
    padding-right: 1px;
}

.addproduct {
    border-radius: 0px;
    border: 2px solid #ddd;
    transition: transform 0.5s ease-in-out;
  transform: translateY(0); /* 初始位置在视图外 */
}

.addproduct .message {
    color: #555555;
    font-weight: 700;
    font-size: 12px;
}

.addproduct .goshopping {
    background-color: rgb(0, 0, 0);
    border: 1px solid rgb(0, 0, 0);
    color: rgb(255, 255, 255);
    padding: 4px 9px;
    font-size: 12px;
    cursor: pointer;
}
.close-btn {
  position: absolute;
  top: 0rem;
  right: 0.5rem;
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  color: rgba(153, 153, 153,.6); /* 设置关闭按钮的颜色 */
}

/* 显示状态下的卡片 */
.slide-up-enter-active {
  transition: transform 0.5s ease-in-out;
}

/* 显示状态下的初始位置 */
.slide-up-enter {
  transform: translateY(100%); /* 初始位置在视图外 */
}

/* 移除离开动画 */
.slide-up-leave-active {
  display: none; /* 直接移除元素，不执行过渡 */
}

</style>